<template>
  <div>
    <div class="topTitle">
      <van-nav-bar
        title="商品列表"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <span class="jd jd-caidan1" v-if="jdIconShow == 0"></span>
          <span class="jd jd-caidan" v-else-if="jdIconShow == 1"></span>
          <span class="jd jd-a-waterfall-type0575742f" v-else></span>
        </template>
      </van-nav-bar>
    </div>
    <div class="options-list">
      <ul class="options-nav" @click="optionFn($event)">
        <li id="a" :class="{ active: active == 0 }" @click="selectFn">
          {{ sign }}<van-icon ref="sj" name="arrow-down" v-if="iconshow" />
          <van-icon name="arrow-up" v-else />
          <!-- <van-dropdown-menu>
            <van-dropdown-item
              v-model="value1"
              :options="option1"
              @change="changeFn($event)"
            />
          </van-dropdown-menu> -->
        </li>

        <li id="b" :class="{ active: active == 1 }">有货优先</li>
        <li id="c" :class="{ active: active == 2 }">直营优先</li>
      </ul>
      <div class="nav-lists" v-show="navListsShow">
        <ul class="nav-lists-ul" @click="uloptionFn($event)">
          <li>
            <p>
              <span id="q" :class="{ active: navActive == 0 }">默认</span
              ><span></span>
            </p>
          </li>
          <li>
            <p>
              <span id="w" :class="{ active: navActive == 1 }"
                >价格由高到低</span
              ><span></span>
            </p>
          </li>
          <li>
            <p>
              <span id="e" :class="{ active: navActive == 2 }"
                >价格由低到高</span
              ><span></span>
            </p>
          </li>
          <!-- <li><van-cell title="默认" value="内容" /></li> -->
          <!-- <li><van-cell title="价格由高到低" value="内容" /></li> -->
          <!-- <li><van-cell title="价格由低到高" value="内容" /></li> -->
        </ul>
      </div>
    </div>

    <GoodsListLine v-if="jdIconShow == 0" :newList="newList"></GoodsListLine>
    <GoodsView v-else-if="jdIconShow == 1" :newList="newList"></GoodsView>
    <GoodsList v-else :newList="newList"></GoodsList>
  </div>
</template>

<script>
import GoodsList from "@/components/goodsList.vue";
import GoodsView from "./components/goodsView.vue";
import GoodsListLine from "./components/goodsListLine.vue";
import token from "@/utils/token";
import { getGoodsList } from "@/api/goodsList";
export default {
  data() {
    return {
      navListsShow: false,
      iconshow: true,
      active: 0,
      navActive: 0,
      jdIconShow: 0,
      list: [], //get到的数据
      newList: [], //要传送的数据
      sign: "默认",
      value1: 0,
      option1: [
        { text: "默认", value: 0 },
        { text: "价格由高到低", value: 1 },
        { text: "价格由低到高", value: 2 },
      ],
    };
  },
  components: {
    GoodsList,
    GoodsView,
    GoodsListLine,
  },
  async created() {
    try {
      let res = await getGoodsList(token);
      //   console.log(res);
      this.list = res.data.data.list;
      this.newList = this.list;
      console.log(this.list);
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    changeFn(e) {
      console.log(e);
    },
    onClickLeft() {
      this.$router.push("/home");
    },
    onClickRight() {
      this.jdIconShow++;
      if (this.jdIconShow == 3) {
        this.jdIconShow = 0;
      }
    },
    uloptionFn(e) {
      // console.log(e);
      if (e.target.nodeName == "SPAN") {
        this.newList = [];
        if (e.target.id == "q") {
          this.navActive = 0;
          this.list.sort((a, b) => a.id - b.id);
          this.newList = this.list;
          this.sign = "默认";
        } else if (e.target.id == "w") {
          this.navActive = 1;
          this.list.sort((a, b) => b.price - a.price);
          this.newList = this.list;
          this.sign = "价格由高到低";
        } else {
          this.navActive = 2;
          this.list.sort((a, b) => a.price - b.price);
          this.newList = this.list;
          this.sign = "价格由低到高";
        }
        this.navListsShow = false;
      }
    },
    optionFn(e) {
      if (e.target.nodeName == "LI") {
        // console.log(111);
        this.newList = [];
        if (e.target.id == "a") {
          this.active = 0;
          this.newList = this.list;
        } else if (e.target.id == "b") {
          this.active = 1;
          this.list.forEach((item) => {
            if (item.isHave) {
              this.newList.push(item);
            }
          });
        } else {
          this.active = 2;
          this.list.forEach((item) => {
            if (item.isDirect) {
              this.newList.push(item);
            }
          });
        }
      }
      // console.log(e);
    },
    selectFn() {
      if (this.active == 0) {
        this.navListsShow = !this.navListsShow;
        this.iconshow = !this.iconshow;
      }
    },
  },
};
</script>

<style scoped lang="less">
.jd {
  font-size: 24px;
}

.topTitle {
  padding-top: 25px;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.options-list {
  .options-nav {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    li {
      width: 33.33%;
      height: 52px;
      text-align: center;
      font-size: 16px;
      line-height: 52px;
      background-color: #fff;
      color: #333;
    }
    .active {
      color: #d81e06;
    }
  }
  .nav-lists {
    transition: all 0.3s linear;
    .nav-lists-ul {
      li {
        background-color: #fff;
        border-bottom: 1px solid #e5e5e5;
        .active {
          color: #d81e06;
        }
        p {
          font-size: 16px;
          padding: 9px;
          line-height: 30px;
        }
      }
    }
  }
}
/deep/ .van-dropdown-menu__bar {
  height: 100%;
  box-shadow: none;
  .van-dropdown-menu__title {
    font-size: 16px;
  }
}
/deep/ .van-cell {
  padding: 8px 30px;
  font-size: 16px;
}
/deep/ .van-nav-bar__content {
  height: 50px;
  .van-nav-bar__title {
    font-size: 18px;
  }
  .van-nav-bar__left {
    .van-icon {
      color: #333;
    }
    .van-nav-bar__arrow {
      font-size: 24px;
    }
  }
}
</style>
